// 柱状图1模块
(function (yuefen) {
  // 实例化对象
  var myChart = echarts.init(document.querySelector(".bar .chart"));
  // 指定配置和数据
  var option = {
    color: ["#2f89cf"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "4%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: [],
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12"
          }
        },
        axisLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12"
          }
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
            // width: 1,
            // type: "solid"
          }
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        }
      }
    ],
    series: [
      {
        name: "直接访问",
        type: "bar",
        barWidth: "35%",
        data: [],
        itemStyle: {
          barBorderRadius: 5
        }
      }
    ]
  };
  // // 进馆人数月度分布
  $.ajax({
    url: "https://sass-test.doit10019.com/api/largeScreen/monthPercent",
    success: function (obj) {
      //   console.log(obj.data.x,'12123')
      //  console.log(  option.xAxis[0].data )
      option.xAxis[0].data = obj.data.x
      option.series[0].data = obj.data.y

    },
    dataType: "json",
    async: false
  })
  //-----定时器start-----
  let timer;
  // 定义定时器函数
  function startTimer() {
    $.ajax({
      url: "https://sass-test.doit10019.com/api/largeScreen/monthPercent",
      success: function (obj) {
        option.xAxis[0].data = obj.data.x;
        option.series[0].data = obj.data.y
        myChart.setOption(option);
      },
      dataType: "json",
      async: false
    })
  }
  // 开启定时器
  timer = setInterval(startTimer, 60000);
  //-----定时器end-----
  // 把配置给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });

  // 数据变化
  // var dataAll = [
  //   { year: "2019", data: [200, 300, 300, 900, 1500, 1200, 600] },
  //   { year: "2020", data: [300, 400, 350, 800, 1800, 1400, 700] }
  // ];

  document.querySelector(".bar h2").addEventListener("click", function (e) {
    var i = e.target == this.children[0] ? 0 : 1;
    option.series[0].data = dataAll[i].data;
    myChart.setOption(option);
  });
})();




// 折线图定制
(function () {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".line .chart"));

  // (1)准备数据
  var data = {
    year: [
      [100, 200, 300, 100],
      [50, 10, 45, 78]
    ]
  };
  // 全局场馆客流统计
  $.ajax({
    url: "https://sass-test.doit10019.com/api/largeScreen/index",
    success: function (obj) {
      data.year[0] = obj.data.lineChartData.data[0]
      data.year[1] = obj.data.lineChartData.data[1]
    },
    dataType: "json",
    async: false
  })

  //-----定时器start-----
  let timer8;
  // 定义定时器函数
  function startTimer() {
    $.ajax({
      url: "https://sass-test.doit10019.com/api/largeScreen/index",
      success: function (obj) {
        data.year[0] = obj.data.lineChartData.data[0]
        data.year[1] = obj.data.lineChartData.data[1]
      },
      dataType: "json",
      async: false
    })
  }
  // 开启定时器
  timer8 = setInterval(startTimer, 60000);
  //-----定时器end-----

  // 2. 指定配置和数据
  var option = {
    color: ["#00f2f1", "#ed3f35"],
    tooltip: {
      // 通过坐标轴来触发
      trigger: "axis"
    },
    legend: {
      // 距离容器10%
      right: "10%",
      // 修饰图例文字的颜色
      textStyle: {
        color: "#4c9bfd"
      }
      // 如果series 里面设置了name，此时图例组件的data可以省略
      // data: ["邮件营销", "联盟广告"]
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "11%",
      show: true,
      borderColor: "#012f4a",
      containLabel: true
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [],
      // 去除刻度
      axisTick: {
        show: false
      },
      // 修饰刻度标签的颜色
      axisLabel: {
        color: "rgba(255,255,255,.7)"
      },
      // 去除x坐标轴的颜色
      axisLine: {
        show: false
      }
    },
    yAxis: {
      type: "value",
      // 去除刻度
      axisTick: {
        show: false
      },
      // 修饰刻度标签的颜色
      axisLabel: {
        color: "rgba(255,255,255,.7)"
      },
      // 修改y轴分割线的颜色
      splitLine: {
        lineStyle: {
          color: "#012f4a"
        }
      }
    },
    series: [
      // {
      //   name: "",
      //   type: "line",
      //   stack: "总量",
      //   // 是否让线条圆滑显示
      //   smooth: true,
      //   data: data.year[0]
      // },
      {
        name: "出馆人数",
        type: "line",
        stack: "总量",
        // 是否让线条圆滑显示
        smooth: true,
        data: data.year[0]
      },
      {
        name: "入馆人数",
        type: "line",
        stack: "总量",
        smooth: true,
        data: data.year[1]
      }
    ]
  };

  // 全局场馆客流统计
  $.ajax({
    url: "https://sass-test.doit10019.com/api/largeScreen/index",
    success: function (obj) {
      option.xAxis.data = obj.data.lineChartData.categories
    },
    dataType: "json",
    async: false
  })
  //-----定时器start-----
  let timer2;
  // 定义定时器函数
  function startTimer() {
    $.ajax({
      url: "https://sass-test.doit10019.com/api/largeScreen/index",
      success: function (obj) {
        option.xAxis.data = obj.data.lineChartData.categories
      },
      dataType: "json",
      async: false
    })

  }
  // 开启定时器
  timer2 = setInterval(startTimer, 60000);
  //-----定时器end-----

  // 3. 把配置和数据给实例对象
  myChart.setOption(option);

  // 重新把配置好的新数据给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();




// 点位分布统计模块
// (function () {
//   // 1. 实例化对象
//   // var myChart = echarts.init(document.querySelector(".Information_Delivery  .chart"));
//   var myChart3 = echarts.init(document.querySelector(".Information_Delivery .chart"));

//   option3 = {
//     legend: {
//       x: 'left',
//       y: 'top',
//       textStyle: {
//         color: '#4ADEFE',
//       }
//     },
//     grid: {
//       x: 30,
//       y: 50,
//       x2: 0,
//       y2: 45
//     },
//     // tooltip: {},
//     tooltip: {
//       // trigger: 'item',
//       // formatter: '{b} : {c} ({d}%)'
//     },
//     dataset: {
//       // source: [
//       //   ['product', '室内场', '室外场'],
//       //   ['08:00', 43.3, 85.8],
//       //   ['09:00', 83.1, 73.4],
//       //   ['12:00', 86.4, 65.2],
//       //   ['14:00', 72.4, 53.9],
//       //   ['16:00', 72.4, 53.9]
//       // ]
//       source: []
//     },
//     xAxis: {
//       type: 'category',
//       axisLine: {
//         lineStyle: {
//           color: "#4ADEFE",
//         }
//       }
//     },
//     yAxis: {
//       axisLine: {
//         lineStyle: {
//           color: "#4ADEFE",
//         }
//       },
//       splitLine: {
//         show: true,
//         lineStyle: {
//           color: '#4ADEFE',
//         }
//       }
//     },
//     series: [
//       {
//         type: 'bar',
//         barMaxWidth: '20',
//         itemStyle: {
//           normal: {
//             color: '#18ffdc',
//           },
//         },
        
//       },
//       // {
//       //   type: 'bar',
//       //   barMaxWidth: '20',
//       //   itemStyle: {
//       //     normal: {
//       //       color: '#ded42d',
//       //     },
//       //   },
//       // }
//     ]
//   };
//   $.ajax({
//     url: "https://sass-test.doit10019.com/api/largeScreen/court",
//     success: function (obj) {
//       console.log(obj, 'fdgd')
//       option3.dataset.source = obj.data

//     },
//     dataType: "json",
//     async: false
//   })
//   //-----定时器start-----
//   let timer337;
//   // 定义定时器函数
//   function startTimer() {
//     // 场地预订率
//     $.ajax({
//       url: "https://sass-test.doit10019.com/api/largeScreen/court",
//       success: function (obj) {
//         console.log(obj, 'fdgd')
//         option3.dataset.source = obj.data
//       },
//       dataType: "json",
//       async: false
//     })
//   }
//   // 开启定时器
//   timer337 = setInterval(startTimer, 60000);
//   //-----定时器end-----
//   myChart3.setOption(option3);
//   // 4. 当我们浏览器缩放的时候，图表也等比例缩放
//   window.addEventListener("resize", function () {
//     // 让我们的图表调用 resize这个方法
//     myChart3.resize();
//   });
// })();




// 男女统计模块
(function () {
  // 1. 实例化对象
  var myChart3 = echarts.init(document.querySelector(".infographic .chart"));

  // 基于准备好的dom，初始化echarts实例

  option3 = {
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    calculable: true,
    series: [
      {
        name: '发布数量',
        type: 'pie',
        radius: '55%',
        center: ['50%', '50%'],
        data: [
          { value: 35, name: '男', itemStyle: { color: '#5739d3' } },
          { value: 10, name: '女', itemStyle: { color: '#d73c75' } },
        ],
        itemStyle: {
          normal: {
            label: {
              show: true,
              formatter: '{b} : {c} ({d}%)'
            },
            labelLine: { show: true }
          }
        }
      }
    ]
  };

  $.ajax({
    url: "https://sass-test.doit10019.com/api/largeScreen/consumeSex",
    success: function (obj) {
      option3.series[0].data = obj.data.data
    },
    dataType: "json",
    async: false
  })
  //-----定时器start-----
  let timer4;
  // 定义定时器函数
  function startTimer() {
    // 场地预订率
    // 进场男女占比
    // 进馆人数月度分布
    $.ajax({
      url: "https://sass-test.doit10019.com/api/largeScreen/consumeSex",
      success: function (obj) {
        option3.series[0].data = obj.data.data
      },
      dataType: "json",
      async: false
    })

  }
  // 开启定时器
  timer4 = setInterval(startTimer, 60000);
  //-----定时器end-----

  // 使用刚指定的配置项和数据显示图表。
  myChart3.setOption(option3);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart3.resize();
  });
})();


// 男女统计模块
// (function () {
//   // 1. 实例化对象
//   // var myChart3 = echarts.init(document.querySelector(".echart44 .chart"));

//   var myChart44 = echarts.init(document.querySelector(".echart44 .chart"));
//   var data = [683, 234, 234, 523, 69, 60, 70, 69]
//   var titlename = ['文本1', '文本2', '文本3', '文本4', '文本5', '文本6', '文本7', '文本8'];
//   var valdata = [683, 234, 234, 523, 345, 234, 523, 345]

  
//   $.ajax({
//     url: "https://sass-test.doit10019.com/api/largeScreen/sport",
//     success: function (obj) {
//       data = obj.data.value
//       titlename = obj.data.title
//       valdata = obj.data.value

//     },
//     dataType: "json",
//     async: false
//   })
//   //-----定时器start-----
//   let timer5;
//   // 定义定时器函数
//   function startTimer() {
//     // 运动排行
//   $.ajax({
//     url: "https://sass-test.doit10019.com/api/largeScreen/sport",
//     success: function (obj) {
//       data = obj.data.value
//       titlename = obj.data.title
//       valdata = obj.data.value

//     },
//     dataType: "json",
//     async: false
//   })
//   }
//   // 开启定时器
//   timer5 = setInterval(startTimer, 60000);
//   //-----定时器end-----

//   option = {

//     grid: {
//       left: '10',
//       top: '20',
//       right: '30',
//       bottom: '-25',
//       containLabel: true
//     },
//     xAxis: {
//       show: false
//     },
//     yAxis: [{
//       show: true,
//       data: titlename,
//       inverse: true,
//       axisLine: {
//         show: false
//       },

//       splitLine: {
//         show: false
//       },
//       axisTick: {
//         show: false
//       },
//       axisLabel: {
//         textStyle: {
//           color: "rgba(255,255,255,.6)",
//         },
//         formatter: function (value, index) {
//           return [
//             '{title|' + value + '} '
//           ].join('\n')
//         },
//         rich: {}
//       },

//     }, {
//       show: true,
//       inverse: true,
//       data: valdata,
//       axisLabel: {
//         textStyle: {
//           color: 'rgba(255,255,255,.5)'
//         }
//       },
//       axisLine: {
//         show: false
//       },
//       splitLine: {
//         show: false
//       },
//       axisTick: {
//         show: false
//       },

//     }],
//     series: [{
//       name: '条',
//       type: 'bar',
//       yAxisIndex: 0,
//       data: data,
//       barWidth: '40%',
//       itemStyle: {
//         normal: {
//           barBorderRadius: 30,
//           color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
//             offset: 0,
//             color: '#248ff7'
//           }, {
//             offset: 1,
//             color: '#3893e5'
//           }]),
//         }
//       },
//       label: {
//         normal: {
//           show: false,
//         }
//       },
//     }, {
//       name: '框',
//       type: 'bar',
//       yAxisIndex: 1,
//       barGap: '-100%',
//       data: [100, 100, 100, 100, 100, 100, 100, 100],
//       barWidth: '40%',
//       itemStyle: {
//         normal: {
//           color: 'none',
//           borderColor: 'rgba(255,255,255,.1)',
//           borderWidth: 1,
//           barBorderRadius: 15,
//         }
//       }
//     }]
//   };




//   // 使用刚指定的配置项和数据显示图表。
//   myChart44.setOption(option);
//   // 4. 当我们浏览器缩放的时候，图表也等比例缩放
//   window.addEventListener("resize", function () {
//     // 让我们的图表调用 resize这个方法
//     myChart44.resize();
//   });
// })();


// 点位分布统计模块
// (function () {
//   // 1. 实例化对象

//   var myChart = echarts.init(document.querySelector('.pie2 .chart'));

//   option = {
//     /*backgroundColor: '#000',*/
//     "animation": true,
//     "title": {
//       /*"text": 24,*/
//       /* "subtext": "沥青工",*/
//       "x": "center",
//       "y": "center",
//       "textStyle": {
//         "color": "#fff",
//         "fontSize": 10,
//         "fontWeight": "normal",
//         "align": "center",
//         "width": "200px"
//       },
//       "subtextStyle": {
//         "color": "#fff",
//         "fontSize": 12,
//         "fontWeight": "normal",
//         "align": "center"
//       }
//     },
//     "legend": {
//       "width": "100%",
//       "left": "center",
//       "textStyle": {
//         "color": "#fff",
//         "fontSize": 12
//       },
//       "icon": "circle",
//       "right": "0",
//       "bottom": "0",
//       "padding": [15, 20],
//       "itemGap": 5,
//       "data": ["票", "卡", "培训", "私教", "场地"]
//     },
//     "series": [{
//       "type": "pie",
//       "center": ["50%", "40%"],
//       "radius": ["20%", "34%"],
//       "color": ["#2bf8ff", "#478af8", "#40f453", "#eca00e", "#faee04"],
//       "startAngle": 135,
//       "labelLine": {
//         "normal": {
//           "length": 15
//         }
//       },
//       "label": {
//         "normal": {
//           "formatter": "{b|{b}:}  {per|{d}%} ",
//           "backgroundColor": "rgba(255, 147, 38, 0)",
//           "borderColor": "transparent",
//           "borderRadius": 4,
//           "rich": {
//             "a": {
//               "color": "#999",
//               "lineHeight": 12,
//               "align": "center"
//             },
//             "hr": {
//               "borderColor": "#aaa",
//               "width": "100%",
//               "borderWidth": 1,
//               "height": 0
//             },
//             "b": {
//               "color": "#b3e5ff",
//               "fontSize": 12,
//               "lineHeight": 33
//             },
//             "c": {
//               "fontSize": 12,
//               "color": "#eee"
//             },
//             "per": {
//               "color": "#FDF44E",
//               "fontSize": 12,
//               "padding": [5, 8],
//               "borderRadius": 2
//             }
//           },
//           "textStyle": {
//             "color": "#fff",
//             "fontSize": 12
//           }
//         }
//       },
//       "emphasis": {
//         "label": {
//           "show": true,
//           "formatter": "{b|{b}:}  {per|{d}%}  ",
//           "backgroundColor": "rgba(255, 147, 38, 0)",
//           "borderColor": "transparent",
//           "borderRadius": 4,
//           "rich": {
//             "a": {
//               "color": "#999",
//               "lineHeight": 22,
//               "align": "center"
//             },
//             "hr": {
//               "borderColor": "#aaa",
//               "width": "100%",
//               "borderWidth": 1,
//               "height": 0
//             },
//             "b": {
//               "color": "#fff",
//               "fontSize": 12,
//               "lineHeight": 33
//             },
//             "c": {
//               "fontSize": 12,
//               "color": "#eee"
//             },
//             "per": {
//               "color": "#FDF44E",
//               "fontSize": 12,
//               "padding": [5, 6],
//               "borderRadius": 2
//             }
//           }
//         }
//       },

//       "data": [{
//         "name": "票",
//         "value": 3
//       }, {
//         "name": "卡",
//         "value": 2
//       }, {
//         "name": "培训",
//         "value": 26
//       }, {
//         "name": "私教",
//         "value": 24
//       }, {
//         "name": "场地",
//         "value": 12
//       }]
//     }, {
//       "type": "pie",
//       "center": ["50%", "40%"],
//       "radius": ["15%", "14%"],
//       "label": {
//         "show": false
//       },
//       "data": [{
//         "value": 78,
//         "name": "实例1",
//         "itemStyle": {
//           "normal": {
//             "color": {
//               "x": 0,
//               "y": 0,
//               "x2": 1,
//               "y2": 0,
//               "type": "linear",
//               "global": false,
//               "colorStops": [{
//                 "offset": 0,
//                 "color": "#9F17FF"
//               }, {
//                 "offset": 0.2,
//                 "color": "#01A4F7"
//               }, {
//                 "offset": 0.5,
//                 "color": "#FE2C8A"
//               }, {
//                 "offset": 0.8,
//                 "color": "#FEE449"
//               }, {
//                 "offset": 1,
//                 "color": "#00FFA8"
//               }]
//             }
//           }
//         }
//       }]
//     }]
//   }
//   $.ajax({
//     url: "https://sass-test.doit10019.com/api/largeScreen/statOrder",
//     success: function (obj) {
//       console.log(obj, 'fdgd')
//       option.series[0].data = obj.data.series[0].data
//       option.legend.data = obj.data.order_type_list

//     },
//     dataType: "json",
//     async: false
//   })
//   //-----定时器start-----
//   let timer6;
//   // 定义定时器函数
//   function startTimer() {
//     // 消费类型占比
//     $.ajax({
//       url: "https://sass-test.doit10019.com/api/largeScreen/statOrder",
//       success: function (obj) {
//         console.log(obj, 'fdgd')
//         option.series[0].data = obj.data.series[0].data
//         option.legend.data = obj.data.order_type_list

//       },
//       dataType: "json",
//       async: false
//     })

//   }
//   // 开启定时器
//   timer6 = setInterval(startTimer, 60000);
//   //-----定时器end-----

//   // 使用刚指定的配置项和数据显示图表。
//   myChart.setOption(option);
//   myChart.currentIndex = -1;
//   //myChart.setOption(option);
//   //console.log(option.series[0].data[0]);
//   setInterval(function () {
//     var dataLen = option.series[0].data.length;
//     // 取消之前高亮的图形
//     myChart.dispatchAction({
//       type: 'downplay',
//       seriesIndex: 0,
//       dataIndex: myChart.currentIndex
//     });
//     myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
//     // 高亮当前图形
//     myChart.dispatchAction({
//       type: 'highlight',
//       seriesIndex: 0,
//       dataIndex: myChart.currentIndex
//     });
//   }, 1000);

//   window.addEventListener("resize", function () {
//     myChart.resize();
//   });

// })();


// 饼形图定制
// 折线图定制
// (function () {
//   // 基于准备好的dom，初始化echarts实例
//   var myChart = echarts.init(document.querySelector(".pie .chart"));

//   option = {
//     tooltip: {
//       trigger: "item",
//       formatter: "{a} <br/>{b}: {c} ({d}%)",
//       position: function (p) {
//         //其中p为当前鼠标的位置
//         return [p[0] + 10, p[1] - 10];
//       }
//     },
//     legend: {
//       top: "90%",
//       itemWidth: 10,
//       itemHeight: 10,
//       data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
//       textStyle: {
//         color: "rgba(255,255,255,.5)",
//         fontSize: "12"
//       }
//     },
//     series: [
//       {
//         name: "年龄分布",
//         type: "pie",
//         center: ["50%", "42%"],
//         radius: ["40%", "60%"],
//         color: [
//           "#065aab",
//           "#066eab",
//           "#0682ab",
//           "#0696ab",
//           "#06a0ab",
//           "#06b4ab",
//           "#06c8ab",
//           "#06dcab",
//           "#06f0ab"
//         ],
//         label: { show: false },
//         labelLine: { show: false },
//         data: [
//           { value: 1, name: "0岁以下" },
//           { value: 4, name: "20-29岁" },
//           { value: 2, name: "30-39岁" },
//           { value: 2, name: "40-49岁" },
//           { value: 1, name: "50岁以上" }
//         ]
//       }
//     ]
//   };

//   // 使用刚指定的配置项和数据显示图表。
//   myChart.setOption(option);
//   window.addEventListener("resize", function () {
//     myChart.resize();
//   });
// })();
// 学习进度柱状图模块
// (function () {
//   // 基于准备好的dom，初始化echarts实例
//   var myChart = echarts.init(document.querySelector(".bar1 .chart"));

//   var data = [90, 80, 75, 65, 65];
//   var titlename = ["javascript", "VUE", "jQuery", "HTML5", "CSS3"];
//   var valdata = ["精通", "熟练", "熟练", "掌握", "掌握"];
//   var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
//   option = {
//     //图标位置
//     grid: {
//       top: "10%",
//       left: "22%",
//       bottom: "10%"
//     },
//     xAxis: {
//       show: false
//     },
//     yAxis: [
//       {
//         show: true,
//         data: titlename,
//         inverse: true,
//         axisLine: {
//           show: false
//         },
//         splitLine: {
//           show: false
//         },
//         axisTick: {
//           show: false
//         },
//         axisLabel: {
//           color: "#fff",

//           rich: {
//             lg: {
//               backgroundColor: "#339911",
//               color: "#fff",
//               borderRadius: 15,
//               // padding: 5,
//               align: "center",
//               width: 15,
//               height: 15
//             }
//           }
//         }
//       },
//       {
//         show: true,
//         inverse: true,
//         data: valdata,
//         axisLabel: {
//           textStyle: {
//             fontSize: 12,
//             color: "#fff"
//           }
//         }
//       }
//     ],
//     series: [
//       {
//         name: "条",
//         type: "bar",
//         yAxisIndex: 0,
//         data: data,
//         barCategoryGap: 50,
//         barWidth: 10,
//         itemStyle: {
//           normal: {
//             barBorderRadius: 20,
//             color: function (params) {
//               var num = myColor.length;
//               return myColor[params.dataIndex % num];
//             }
//           }
//         },
//         label: {
//           normal: {
//             show: true,
//             position: "inside",
//             formatter: "{c}%"
//           }
//         }
//       },
//       {
//         name: "框",
//         type: "bar",
//         yAxisIndex: 1,
//         barCategoryGap: 50,
//         data: [100, 100, 100, 100, 100],
//         barWidth: 15,
//         itemStyle: {
//           normal: {
//             color: "none",
//             borderColor: "#00c1de",
//             borderWidth: 3,
//             barBorderRadius: 15
//           }
//         }
//       }
//     ]
//   };

//   // 使用刚指定的配置项和数据显示图表。
//   myChart.setOption(option);
//   window.addEventListener("resize", function () {
//     myChart.resize();
//   });
// })();
// 折线图 优秀作品
// (function () {
//   // 基于准备好的dom，初始化echarts实例
//   var myChart = echarts.init(document.querySelector(".line1 .chart"));

//   option = {
//     tooltip: {
//       trigger: "axis",
//       axisPointer: {
//         lineStyle: {
//           color: "#dddc6b"
//         }
//       }
//     },
//     legend: {
//       top: "0%",
//       textStyle: {
//         color: "rgba(255,255,255,.5)",
//         fontSize: "12"
//       }
//     },
//     grid: {
//       left: "10",
//       top: "30",
//       right: "10",
//       bottom: "10",
//       containLabel: true
//     },

//     xAxis: [
//       {
//         type: "category",
//         boundaryGap: false,
//         axisLabel: {
//           textStyle: {
//             color: "rgba(255,255,255,.6)",
//             fontSize: 12
//           }
//         },
//         axisLine: {
//           lineStyle: {
//             color: "rgba(255,255,255,.2)"
//           }
//         },

//         data: [
//           "01",
//           "02",
//           "03",
//           "04",
//           "05",
//           "06",
//           "07",
//           "08",
//           "09",
//           "11",
//           "12",
//           "13",
//           "14",
//           "15",
//           "16",
//           "17",
//           "18",
//           "19",
//           "20",
//           "21",
//           "22",
//           "23",
//           "24",
//           "25",
//           "26",
//           "27",
//           "28",
//           "29",
//           "30"
//         ]
//       },
//       {
//         axisPointer: { show: false },
//         axisLine: { show: false },
//         position: "bottom",
//         offset: 20
//       }
//     ],

//     yAxis: [
//       {
//         type: "value",
//         axisTick: { show: false },
//         axisLine: {
//           lineStyle: {
//             color: "rgba(255,255,255,.1)"
//           }
//         },
//         axisLabel: {
//           textStyle: {
//             color: "rgba(255,255,255,.6)",
//             fontSize: 12
//           }
//         },

//         splitLine: {
//           lineStyle: {
//             color: "rgba(255,255,255,.1)"
//           }
//         }
//       }
//     ],
//     series: [
//       {
//         name: "流入",
//         type: "line",
//         smooth: true,
//         symbol: "circle",
//         symbolSize: 5,
//         showSymbol: false,
//         lineStyle: {
//           normal: {
//             color: "#0184d5",
//             width: 2
//           }
//         },
//         areaStyle: {
//           normal: {
//             color: new echarts.graphic.LinearGradient(
//               0,
//               0,
//               0,
//               1,
//               [
//                 {
//                   offset: 0,
//                   color: "rgba(1, 132, 213, 0.4)"
//                 },
//                 {
//                   offset: 0.8,
//                   color: "rgba(1, 132, 213, 0.1)"
//                 }
//               ],
//               false
//             ),
//             shadowColor: "rgba(0, 0, 0, 0.1)"
//           }
//         },
//         itemStyle: {
//           normal: {
//             color: "#0184d5",
//             borderColor: "rgba(221, 220, 107, .1)",
//             borderWidth: 12
//           }
//         },
//         data: [
//           30,
//           40,
//           30,
//           40,
//           30,
//           40,
//           30,
//           60,
//           20,
//           40,
//           20,
//           40,
//           30,
//           40,
//           30,
//           40,
//           30,
//           40,
//           30,
//           60,
//           20,
//           40,
//           20,
//           40,
//           30,
//           60,
//           20,
//           40,
//           20,
//           40
//         ]
//       },
//       {
//         name: "流出",
//         type: "line",
//         smooth: true,
//         symbol: "circle",
//         symbolSize: 5,
//         showSymbol: false,
//         lineStyle: {
//           normal: {
//             color: "#00d887",
//             width: 2
//           }
//         },
//         areaStyle: {
//           normal: {
//             color: new echarts.graphic.LinearGradient(
//               0,
//               0,
//               0,
//               1,
//               [
//                 {
//                   offset: 0,
//                   color: "rgba(0, 216, 135, 0.4)"
//                 },
//                 {
//                   offset: 0.8,
//                   color: "rgba(0, 216, 135, 0.1)"
//                 }
//               ],
//               false
//             ),
//             shadowColor: "rgba(0, 0, 0, 0.1)"
//           }
//         },
//         itemStyle: {
//           normal: {
//             color: "#00d887",
//             borderColor: "rgba(221, 220, 107, .1)",
//             borderWidth: 12
//           }
//         },
//         data: [
//           50,
//           30,
//           50,
//           60,
//           10,
//           50,
//           30,
//           50,
//           60,
//           40,
//           60,
//           40,
//           80,
//           30,
//           50,
//           60,
//           10,
//           50,
//           30,
//           70,
//           20,
//           50,
//           10,
//           40,
//           50,
//           30,
//           70,
//           20,
//           50,
//           10,
//           40
//         ]
//       }
//     ]
//   };

//   // 使用刚指定的配置项和数据显示图表。
//   myChart.setOption(option);
//   window.addEventListener("resize", function () {
//     myChart.resize();
//   });
// })();

// 点位分布统计模块
// (function () {
//   // 1. 实例化对象
//   var myChart = echarts.init(document.querySelector(".pie1  .chart"));
//   // 2. 指定配置项和数据
//   var option = {
//     legend: {
//       top: "90%",
//       itemWidth: 10,
//       itemHeight: 10,
//       textStyle: {
//         color: "rgba(255,255,255,.5)",
//         fontSize: "12"
//       }
//     },
//     tooltip: {
//       trigger: "item",
//       formatter: "{a} <br/>{b} : {c} ({d}%)"
//     },
//     // 注意颜色写的位置
//     color: [
//       "#2bf8ff",
//       "#478af8",
//       "#40f453",
//       "#eca00e",
//       "#faee04"
//     ],
//     series: [
//       {
//         name: "点位统计",
//         type: "pie",
//         // 如果radius是百分比则必须加引号
//         radius: ["10%", "70%"],
//         center: ["50%", "42%"],
//         roseType: "radius",
//         data: [
//           { value: 20, name: "票" },
//           { value: 26, name: "卡" },
//           { value: 24, name: "培训" },
//           { value: 25, name: "私教" },
//           { value: 20, name: "场地" }
//         ],
//         // 修饰饼形图文字相关的样式 label对象
//         label: {
//           fontSize: 10
//         },
//         // 修饰引导线样式
//         labelLine: {
//           // 连接到图形的线长度
//           length: 10,
//           // 连接到文字的线长度
//           length2: 10
//         }
//       }
//     ]
//   };

//   // 3. 配置项和数据给我们的实例化对象
//   myChart.setOption(option);
//   // 4. 当我们浏览器缩放的时候，图表也等比例缩放
//   window.addEventListener("resize", function () {
//     // 让我们的图表调用 resize这个方法
//     myChart.resize();
//   });
// })();



// // 男女统计模块
// (function () {
//   // 1. 实例化对象
//   var myChart3 = echarts.init(document.querySelector(".home .chart"));

//   // 基于准备好的dom，初始化echarts实例

//   option3 = {
//       tooltip: {
//         trigger: 'item',
//         formatter: "{b} : {c} ({d}%)"
//       },
//       legend: {
//         right: 10,
//         top: 30,
//         height: 140,
//         itemWidth: 10,
//         itemHeight: 10,
//         itemGap: 10,
//         textStyle: {
//           color: 'rgba(255,255,255,.6)',
//           fontSize: 12
//         },
//         orient: 'vertical',
//         data: ['男', '女']
//       },
//       calculable: true,
//       series: [
//         {
//           name: ' ',
//           color: ['#5739d3', '#d73c75', '#c9c862', '#c98b62', '#c962b9', '#7562c9', '#c96262'],
//           type: 'pie',
//           radius: [30, 70],
//           center: ['35%', '50%'],
//           roseType: 'radius',
//           label: {
//             normal: {
//               show: true
//             },
//             emphasis: {
//               show: true
//             }
//           },

//           lableLine: {
//             normal: {
//               show: true
//             },
//             emphasis: {
//               show: true
//             }
//           },

//           data: [
//             { value: 50, name: '男' },
//             { value: 45, name: '女' },
//           ]
//         },
//       ]
//     };

//     // 使用刚指定的配置项和数据显示图表。
//   myChart3.setOption(option3);
//   // 4. 当我们浏览器缩放的时候，图表也等比例缩放
//   window.addEventListener("resize", function () {
//     // 让我们的图表调用 resize这个方法
//     myChart.resize();
//   });
// })();

